import React from 'react';
import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
import { Card, message, Upload, Button, Row, Col } from 'antd';
import { InboxOutlined, UploadOutlined  } from '@ant-design/icons';
// import Highlighter from "react-highlight-words";
import copy from 'copy-to-clipboard';

const { Dragger } = Upload;
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { useIntl } from 'umi';
export default ()=>{
  const intl = useIntl();
  copy('Text', {
    debug: true,
    message: 'Press s to copy',
  });
  const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };
  return (
    <PageHeaderWrapper
      content={intl.formatMessage({
        id: 'pages.admin.subPage.title',
        defaultMessage: 'This page can only be viewed by admin',
      })}
    >

<Row gutter={16}>
      <Col span={24}>
        <Card title="上传图片文件夹" bordered={false}>
        <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
    <Button icon={<UploadOutlined />}>Upload Directory</Button>
  </Upload>
        </Card>
      </Col>

    </Row>
      <Card  title="拖拽上传图片" bordered={false} style={{height:"20rem" }}>
  

      <Dragger {...props}  >
      {/* <Highlighter
    highlightClassName="YourHighlightClass"
    searchWords={["and", "or", "the"]}
    autoEscape={true}
    textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
  /> */}
    <p className="ant-upload-drag-icon">
      <InboxOutlined />
    </p>
    <p className="ant-upload-text">Click or drag file to this area to upload</p>
    <p className="ant-upload-hint">
      Support for a single or bulk upload. Strictly prohibit from uploading company data or other
      band files
    </p>
  </Dragger>
      </Card>
 
    </PageHeaderWrapper>
  );
};
